<template>
	<view class="content login_content">
		<view class="banner">
			<image class="login_bg" src="../../static/images/massageChair_index_bg.png" mode="widthFix"> </image>
			<view class="corp_info">
				<view class="logo">
					<image :src="imgBaseUrl + '../../static/images/massageChair_index_didian.png'" mode="widthFix"></image>
				</view>
				<view class="name">
					<view class="equipNumber">设备编号：{{ deviceId }}</view>
					<view class="equipLocal">地点：{{ address }}</view>
				</view>
			</view>
		</view>

		<view class="bottom_body">
			<view class="bottom_title">选择套餐</view>
			<view class="bottom_item" v-for="(item, index) in dataList" :key="index">
				<view class="item_content">
					<view class="content_top">
						<view class="top_left">{{ item.advdesc }}</view>
						<view class="top_right"><span>￥</span>{{ item.currentprice }}</view>
					</view>
					<view class="content_bottom">
						<view class="bottom_left">按摩{{ item.timelong }}分钟 </view>
						<view class="bottom_right">￥{{ item.origprice }}</view>
					</view>
				</view>
				<view class="item_button">
					<view class="pay_button" @click="payHandler(item)">支付</view>
				</view>
			</view>



		</view>
		<chargeButton></chargeButton>
		<infoButton></infoButton>

	</view>
</template>
<script>
import wx from "weixin-js-sdk";
import { toast, showConfirm, tansParams } from '@/utils/common'
import infoButton from "@/components/infoButton/index.vue";
import chargeButton from "@/components/chargeButton/index.vue";
import { packageRecords, findJsConfigMessage, unifiedorderMassageChair, deviceStatus } from '@/api/massageChair'
export default {
	name: 'index',
	components: { infoButton, chargeButton },
	data() {
		return {
			browserClient: getApp().globalData.browserClient,
			deviceId: getApp().globalData.deviceId,
			address: '',
			imgBaseUrl: "",
			dataList: [],

		};
	},

	onLoad() {
		this.init()
	},
	onShow() {
		console.log("onShow")
	},
	methods: {
		init(){
		this.getFindJsConfigWxShop()
		this.getPackageRecords()
		this.getDeviceStatus()
		},

		async getDeviceStatus() {
			const res = await deviceStatus({ deviceId: this.deviceId })
			if (res.results.code == 200) {
				uni.setStorageSync("address", res.results.data.address);
				this.address = res.results.data.address;
				console.log(res.results.data.address);
				if (res.results.data.status == 1) {
					//未使用
				} else if (res.results.data.status == 2) {
					//非本人(使用中)
					this.$tab.reLaunch(`/pages/massageChair/scanError?status=${res.results.data.status}`) 

				} else if (res.results.data.status == 3) {
					//本人(使用中)
					uni.setStorageSync("orderNo", res.results.data.orderno);
					this.$tab.reLaunch(`/pages/massageChair/usageTime`) 
				} else {
					this.$tab.reLaunch(`/pages/massageChair/scanError?status=${res.results.data.status}`) 

				}
			} else {
				toast(res.results.message)
			}

		},
		async getPackageRecords() {
			const res = await packageRecords({ deviceId: this.deviceId })
			if (res.results.code == 200) {
				this.dataList = res.results.data
			} else {
				toast(res.results.message)
			}

		},
		async getFindJsConfigWxShop() {
			const res = await findJsConfigMessage({orgId: '1', url: window.location.href })
			if (res.code == 200) {
				console.log(res.data.appId)
				wx.config({
					debug: false,
					appId: res.data.appId, // 必填，公众号的唯一标识
					timestamp: res.data.timestamp, // 必填，生成签名的时间戳
					nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
					signature: res.data.signature, // 必填，签名，见附录1
					jsApiList: ['chooseWXPay'],
					openTagList: ['wx-open-launch-weapp'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
				console.log('UI无u啊', wx)
				wx.ready(function () {
					console.log(8888)
				});
			} else {
				toast(res.message)
			}

		},


		async payHandler(item) {
			console.log(wx)
			uni.showLoading({
				title: '正在请求...',
				mask: true
			})

			const r = await unifiedorderMassageChair({ pricingConfigId: item.id, actualPrice: item.currentprice, factDevNo: this.deviceId, choosePaymentChannels: '1' })
			if (r.code == 200) {
				uni.hideLoading()
				uni.setStorageSync("orderNo", r.data.orderNo);
				// wx.chooseWXPay({
				// 	timestamp: r.data.timeStamp,
				// 	nonceStr: r.data.nonceStr,
				// 	package: r.data.packages,
				// 	signType: r.data.signType,
				// 	paySign: r.data.paySign,
				// 	success: function (res) {
				// 		if (res.errMsg == 'chooseWXPay:ok') {
				// 			uni.navigateTo({
				// 				url: `/pages/massageChair/paymentSuccess?timelong=${item.timelong}&currentprice=${item.currentprice}&origprice=${item.origprice}`,
				// 			});
				// 		} else {

				// 		}

				// 	}

				// });


			WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                  "appId": r.data.appId, //公众号名称，由商户传入     
                  "timeStamp": r.data.timeStamp, //时间戳，自1970年以来的秒数     
                  "nonceStr": r.data.nonceStr, //随机串     
                  "package": r.data.packages,
                  "signType": r.data.signType, //微信签名方式：     
                  "paySign": r.data.paySign //微信签名 
                },
                function(res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    	uni.navigateTo({
								url: `/pages/massageChair/paymentSuccess?timelong=${item.timelong}&currentprice=${item.currentprice}&origprice=${item.origprice}`,
						});
                  }
                }
              );










				

			}


		},

	}
};
</script>
<style lang="scss">
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	min-height: 100%;
	height: auto;
}

.content {
	position: relative;

	.banner {
		background: #30a3fc;
		width: 100%;
		position: relative;

		.login_bg {
			display: block;
			width: 100%;
		}

		.corp_info {
			width: 686rpx;
			max-height: 170rpx;
			padding: 30rpx 24rpx;
			background: linear-gradient(180deg, #E4F7FA 0%, #FFFFFF 100%);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 180px;
			z-index: 1;

			.logo {
				image{
					display: block;
					width: 32px;
					height: 32px;
				}
			}

			.name {
				margin-left: 26rpx;

				.equipNumber {
					font-size: 28rpx;
					font-weight: 500;
					color: #1F2E49;
				}

				.equipLocal {
					margin-top: 6rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #1F2E49;
				}
			}
		}
	}

	.bottom_body {
		padding: 32rpx 40rpx 160rpx 40rpx;
		position: absolute;
		top: 260px;
		width: 100%;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		background-color: #ffffff;
		box-sizing: border-box;

		.bottom_title {
			height: 44rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1F2E49;
			margin-bottom: 8rpx;
		}

		.bottom_item {
			padding: 30rpx 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx #E2E4ED;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item_content {
				flex: 4;

				.content_top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.top_left {
						font-size: 36rpx;
						font-weight: 600;
						color: #1F2E49;
					}

					.top_right {
						font-size: 48rpx;
						font-weight: 600;
						color: #FE6601;

						span {
							font-size: 24rpx;
							font-weight: 400;
						}

					}
				}

				.content_bottom {
					margin-top: 8rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bottom_left {
						font-size: 28rpx;
						font-weight: 400;
						color: #1F2E49;
					}

					.bottom_right {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 1.5;
						text-decoration: line-through;
					}
				}

			}

			.item_button {
				flex: 1;
				margin-left: 48rpx;

				.pay_button {
					width: 120rpx;
					height: 80rpx;
					background: #16A1FE;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
				}

			}

		}






	}
}
</style>
